<!--
    echart5 图表控件封装
    官网例子：https://echarts.apache.org/examples/zh/index.html#chart-type-pie
-->
<template>
    <div
        ref="chart"
        v-loading="loading"
        class="chart-wrapper"
        :style="{
            width: width,
            height: height,
        }"
    >
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    /**
     * event事件：
     *  rendered 渲染结束，不包含动画
     */
    export default {
        name: "MyChart",
        props: {
            width: {
                type: String,
                default: '100%',
            },
            height: {
                type: String,
                default: '100%',
            },
            //图表可选参数
            option: Object,
            //图表边距
            grid: {
                type: Object,
                default(){
                    return {
                        top: '3%',
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true
                    }
                },
            },
            //动画时长
            duration: {
                type: Number,
                default: 300,
            },
        },
        watch: {
            //图表可选参数 变化
            option(newOption){
                console.log('图表可选参数 变化', newOption);
                this.chart.setOption(newOption);
            },
        },
        data() {
            return {
                //图表对象
                chart: null,
                //加载中
                loading: false,
            }
        },
        created(){
            //窗口大小改变事件监听
            this.$bus.on('windowResize', this.windowResize);
        },
        mounted(){
            this.initChart();
        },
        methods: {
            /**
             * 初始化图表控件
             */
            initChart(){
                const chartDom = this.$refs.chart;
                const chart = echarts.init(chartDom, 'custom');
                chart.on('finished', this.finished);
                this.chart = chart;
                // 图表已创建事件
                this.$emit('created', chart);

                const option = this.getOption();
                if (!option) {
                    console.error("图表配置参数为空！");
                    return;
                }
                option && chart.setOption(option);
            },
            //获取图表配置参数
            getOption(){
                let {option} = this;
                if (!option) {
                    return null;
                }
                //边距
                if (!option.grid) {
                    option.grid = this.grid;
                }
                return option;
            },
            /**
             * 渲染结束
             */
            finished(){
                // console.log("渲染结束");
                let {chart} = this;
                this.$emit('rendered', chart);
            },
            //窗口大小改变
            windowResize(){
                let {chart, duration} = this;
                chart && chart.resize({
                    animation: {
                        duration: duration,
                    },
                });
            },
        },
    }
</script>

<style scoped>
    .chart-wrapper{

    }
</style>
